<template>
  <el-dialog
    title="预约天数"
    :visible.sync="ddVisible"
    :destroy-on-close="true"
    width="40%"
    :before-close="handleClose"
    custom-class="dragDialog"
    v-dialogDrag>
    <el-form class="rule-form" ref="form" :model="ruleForm" :rules="rules">
      <el-form-item label="医院" label-width="80px" prop="hospitalCode">
        <el-select style="width:100%" size="small" filterable v-model="ruleForm.hospitalCode" @change="changeHosp" placeholder="请选择医院">
          <el-option
            v-for="item in mx_hospitalList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="影像区域" label-width="80px" prop="depArea">
        <el-select style="width:100%" size="small" v-model="ruleForm.depArea" @change="changeDepArea" placeholder="请选择" clearable>
          <el-option
            v-for="item in depAreaOptions"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查部门" label-width="80px" prop="dep">
        <el-select style="width:100%" size="small" v-model="ruleForm.dep" placeholder="请选择" clearable>
          <el-option
            v-for="item in depOptions"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="天数" label-width="80px" prop="dayNum">
        <el-input-number v-model.number="ruleForm.dayNum" size="small" :min="1" :max="30" label="天数（1-30）"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">关闭</el-button>
      <el-button size="small" type="primary" @click="handleConfirm('form')">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getDepAreaList, getDepList, putAppointmentMonitorDay, postAppointmentMonitorDay } from '@/api/api.js'

export default {
  name: 'DayNum',
  props: {
    dialogDayVisible: {
      type: Boolean,
      default: false
    },
    dayData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      departmentOptions: [], // 科室
      depAreaOptions: [],
      depOptions: [], // 检查部门
      modalityOptions: [], // 检查设备
      ruleForm: {
        hospitalCode: '',
        depArea: '',
        dep: '',
        dayNum: ''
      },
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      tableDic: [],
      rules: {
        hospitalCode: [{ required: true, message: '请选择医院', trigger: 'blur' }],
        depArea: [{ required: true, message: '请选择影像院区', trigger: 'blur' }],
        dep: [{ required: true, message: '请选择检查部门', trigger: 'blur' }],
        dayNum: [{ required: true, message: '请填写天数', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ddVisible: {
      get() {
        return this.dialogDayVisible
      },
      set(val) {
        this.$emit('update:dialogDayVisible', val)
      }
    }
  },
  watch: {
    dialogDayVisible: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$refs.form && this.$refs.form.clearValidate()
          this.handleReset()
          if (this.dayData) {
            this.ruleForm = Object.assign(this.ruleForm, this.dayData)
          }
          this.init()
        }
      }
    }
  },
  methods: {
    async init() {
      try {
        await this.$getHospitalList()
        this.getDepArea()
        this.getDep()
      } catch (err) {
        console.log(err)
      }
    },
    changeHosp() {
      if (!this.ruleForm.hospitalCode) return
      // 关联：影像、检查部门、检查分组、检查设备、检查机房
      this.depAreaOptions = []
      this.depOptions = []
      this.ruleForm.depArea = ''
      this.ruleForm.dep = ''

      try {
        this.getDepArea()
        this.getDep()
      } catch (err) {
        console.log(err)
      }
    },
    getDepArea() {
      let data = { HospitalCode: this.ruleForm.hospitalCode }
      return new Promise(resolve => {
        getDepAreaList(data).then(res => {
          if (res && res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    changeDepArea() {
      // if (!this.ruleForm.depArea) return
      // 关联：检查部门 科室
      this.depOptions = []
      this.ruleForm.dep = ''

      try {
        this.getDep()
      } catch (err) {
        console.log(err)
      }
    },
    getDep() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        DepArea: this.ruleForm.depArea
      }
      return new Promise(resolve => {
        getDepList(data).then(res => {
          if (res && res.code === 10000) {
            this.depOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    handleClose() {
      this.ddVisible = false
      // this.$emit('myClose')
    },
    handleConfirm(formName) {
      this.$refs[formName].validate((valid, object) => {
        if (valid) {
          // 修改
          if (this.ruleForm.id) {
            putAppointmentMonitorDay(this.ruleForm).then(res => {
              if (res && res.code === 10000) {
                this.$message.success('修改成功')
                this.ddVisible = false
                this.$emit('refreshDay')
              }
            })
          } else {
            postAppointmentMonitorDay(this.ruleForm).then(res => {
              if (res && res.code === 10000) {
                this.$message.success('添加成功')
                this.ddVisible = false
                this.$emit('refreshDay')
              }
            })
          }
        } else {
          for (let k in object) {
            this.$message.warning(object[k][0].message)
            return
          }
        }
      })
    },
    handleReset() {
      this.ruleForm = {
        hospitalCode: '',
        depArea: '',
        dep: '',
        dayNum: ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog{
    /deep/ .el-dialog__body{
        padding: 0px 20px;
    }
    .el-form{
        .el-form-item{
            margin-bottom: 10px;
            /deep/ .el-form-item__error{
                padding-top: 0px;
            }
        }
    }
}
</style>
